<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        // 1.获取元素的属性值
        var div = document.querySelector('div')
        // (1)element.属性  只能获取元素内置属性的值
        console.log(div.id);//demo
        // (2)element.getAttribute('属性')     获取元素自定义属性的值 必须通过getAttribute（自定义：程序员自己添加的属性，有时元素内置的属性不够用）
        console.log(div.getAttribute('id'));//demo get的到获取的意思 attribute 属性的意思
        console.log(div.getAttribute('index'));//1
        // 2.设置元素内置属性的值
        // (1)Element.属性 = '值'
        div.id = 'test'
        div.className = 'navs'//特殊情况 ：元素修改内置class属性的值时 需要在class后面跟上Name
        // (2)element.setAttribute('属性','值') 主要针对于自定义属性
        div.setAttribute('index', '2')
        // console.log(div.getAttribute('index'));
        div.setAttribute('class','footer')// setAttribute既可以修改元素自定义属性的值 也可以修改元素内置属性的值 不同的是修改内置属性class的值时不需要在后面跟上Name 要记住 
        // 3.移除属性 
        // (1)element.removeAttribute('属性')
        div.removeAttribute('index')

    </script>
</body>

</html>